<template>
    <div class="container">
        <div class="header">
            <Button type="success">数据导出</Button>
            <div class="total-num">总记录: <span>1条</span></div>
        </div>
        <div class="op-frame">
            <Row :gutter="10">
                <Col span="4">
                    <Input suffix="ios-search" placeholder="请输入证件号" style="width: auto" class="item" />
                </Col>
                <Col span="4">
                    <Input suffix="ios-search" placeholder="请输入姓名" style="width: auto" class="item" />
                </Col>
                <Col span="4">
                    <DatePicker type="date" placeholder="开始时间" class="item"></DatePicker>
                </Col>
                <Col span="4">
                    <DatePicker type="date" placeholder="结束时间" class="item"></DatePicker>
                </Col>
                <Col span="4">

                </Col>
                <Col span="4">
                    <Button type="primary" style="width: 100px;">查询</Button>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="2"><strong>基本信息</strong></Col>
                <Col span="22">
                    <CheckboxGroup v-model="rjry">
                        <Checkbox label="国籍"></Checkbox>
                        <Checkbox label="户籍地址"></Checkbox>
                        <Checkbox label="护照号"></Checkbox>
                        <Checkbox label="入境时间"></Checkbox>
                        <Checkbox label="人员来自国"></Checkbox>
                        <Checkbox label="人员入境口岸"></Checkbox>
                        <Checkbox label="人员来沈日期"></Checkbox>
                        <Checkbox label="目标城市"></Checkbox>
                        <Checkbox label="现住址"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="2"><strong>中转信息</strong></Col>
                <Col span="22">
                    <CheckboxGroup v-model="zzxx">
                        <Checkbox label="离沈时间"></Checkbox>
                        <Checkbox label="离沈去向"></Checkbox>
                        <Checkbox label="目的地城市"></Checkbox>
                        <Checkbox label="离沈方式"></Checkbox>
                        <Checkbox label="离沈交通工具班次(车次)"></Checkbox>
                        <Checkbox label="机舱等级(车厢号/车牌号)"></Checkbox>
                        <Checkbox label="座位号"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="2"><strong>密接信息</strong></Col>
                <Col span="22">
                    <CheckboxGroup v-model="mjxx">
                        <Checkbox label="患者姓名"></Checkbox>
                        <Checkbox label="来源国家"></Checkbox>
                        <Checkbox label="确诊时间"></Checkbox>
                        <Checkbox label="证件类型"></Checkbox>
                        <Checkbox label="证件号码"></Checkbox>
                        <Checkbox label="联系电话"></Checkbox>
                        <Checkbox label="密接时间"></Checkbox>
                        <Checkbox label="密接方式"></Checkbox>
                        <Checkbox label="密接人现状"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="2"><strong>接触信息</strong></Col>
                <Col span="22">
                    <CheckboxGroup v-model="jcxx">
                        <Checkbox label="患者姓名"></Checkbox>
                        <Checkbox label="来源国家"></Checkbox>
                        <Checkbox label="确诊时间"></Checkbox>
                        <Checkbox label="证件类型"></Checkbox>
                        <Checkbox label="证件号码"></Checkbox>
                        <Checkbox label="联系电话"></Checkbox>
                        <Checkbox label="接触时间"></Checkbox>
                        <Checkbox label="接触方式"></Checkbox>
                        <Checkbox label="接触人现状"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="2"><strong>隔离信息</strong></Col>
                <Col span="22">
                    <CheckboxGroup v-model="glxx">
                        <Checkbox label="隔离时间"></Checkbox>
                        <Checkbox label="隔离方式"></Checkbox>
                        <Checkbox label="隔离地点"></Checkbox>
                        <Checkbox label="隔离管理单位"></Checkbox>
                        <Checkbox label="隔离管理人"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="2"><strong>核酸检测</strong></Col>
                <Col span="22">
                    <CheckboxGroup v-model="hsjc">
                        <Checkbox label="样品来源"></Checkbox>
                        <Checkbox label="采样日期"></Checkbox>
                        <Checkbox label="采样次数"></Checkbox>
                        <Checkbox label="检验结果"></Checkbox>
                        <Checkbox label="收治处置"></Checkbox>
                        <Checkbox label="异常信息"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
        </div>
        <div class="report-content">
            <Table :columns="columns1" :data="data1" style="width: 100%"></Table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      columns1: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          key: 'sex'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '证件类型',
          key: 'card_type'
        },
        {
          title: '证件号码',
          key: 'card_no'
        },
        {
          title: '联系电话',
          key: 'tel'
        }
      ],
      data1: [
        {
          name: '张嵩',
          sex: '男',
          age: '21',
          card_type: '身份证',
          card_no: '210109********7027',
          tel: '130****2327'
        }
      ]
    }
  }
}
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}
.op-frame {
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 24px 16px 24px 16px;
}
.op-frame>.group {
    width: 80%;
}
.op-frame>.group>.item{
    margin-right: 10px;
}
.report-content {
    margin-top: 20px;
}
    .total-num>span {
        font-weight: 700;
        color: darkred;
    }
</style>
